<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>经纬度坐标转换</title>
    <style>
		body {
		    padding:0;
		    margin:0;
		}
		textarea {
			width: 98%;
    		height: 100%;
		}
		.hide {
			display: none;
		}
		.is_zhankai {
			width: 150px;
		    height: 40px;
		    text-align: center;
		    background-color: #00E809;
		    color: #FFF;
		    line-height: 40px;
		    border-radius: 5px;
		    cursor: pointer;
		    display: inline-block;
		    margin-top: 20px;
		    margin-left: 43%;
		}
		.submit,.copyCode {
			width: 100%;
		    height: 40px;
		    text-align: center;
		    background-color: #FF6565;
		    color: #FFF;
		    line-height: 40px;
		    border-radius: 5px;
		    display: inline-block;
		}
		.submit {
		    background-color: #00E809;
		}
    </style>
</head>
<body>
     <a class="is_zhankai">展开/隐藏</a>

	<table style="width: 100%;height: 700px;margin-top: 20px;" border="1">
		<tr align="center" style="height: 40px;background: #F2F2F2;">
			<th width="19.5%">原始数据 <small>http://geojson.io/#map=15/31.1425/121.3611</small> </th>
			<th width="3%"></th>
			<th width="19.5%">wgs84转国测局坐标</th>
			<th width="19.5%">国测局坐标转wgs84坐标</th>
			<th class="is_show hide" width="19.5%">百度经纬度坐标转国测局坐标</th>
			<th class="is_show hide" width="19.5%">国测局坐标转百度经纬度坐标</th>
		</tr>
		<tr align="center">
			<td>
				<textarea class="data_" placeholder="数据来源 http://geojson.io/#map=15/31.1425/121.3611">[
  [
    121.35935783386229,
    31.149760928387767
  ],
  [
    121.36558055877686,
    31.152368561406956
  ],
  [
    121.37321949005128,
    31.138999092485577
  ],
  [
    121.36751174926758,
    31.138227719452725
  ],
  [
    121.35918617248534,
    31.149907839197123
  ]
]</textarea>
			</td>
			<td></td>
			<td>
				<textarea class="aaa" placeholder="wgs84转国测局坐标 结果" readonly="readonly"></textarea>
			</td>
			<td>
				<textarea class="bbb" placeholder="国测局坐标转wgs84坐标 结果" readonly="readonly"></textarea>
			</td>
			<td class="is_show hide">
				<textarea class="ccc" placeholder="百度经纬度坐标转国测局坐标 结果" readonly="readonly"></textarea>
			</td>
			<td class="is_show hide">
				<textarea class="ddd" placeholder="国测局坐标转百度经纬度坐标 结果" readonly="readonly"></textarea>
			</td>
		</tr>
		<tr align="center" style="height: 40px;background: #F2F2F2;">
			<td>
				<a class="submit">提交转换</a>
			</td>
			<td></td>
			<td>
				<a class="copyCode copyCode_aaa">复制</a>
			</td>
			<td>
				<a class="copyCode copyCode_bbb">复制</a>
			</td>
			<td class="is_show hide">
				<a class="copyCode copyCode_ccc">复制</a>
			</td>
			<td class="is_show hide">
				<a class="copyCode copyCode_ddd">复制</a>
			</td>
		</tr>
	</table>

<script src="jquery-3.2.0.min.js"></script>
<script src="coordtransform.js"></script>
<script src="clipboard.min.js"></script>
<script src="inone.js"></script> 

<script>
	$( '.is_zhankai' ).bind( 'click', function() {
		var $this = $('.is_show'),
			textarea = $('textarea'),
			small = $('small'),
			display = $this.css('display');

			if( display == 'none' ){
				$this.show();
				textarea.css('font-size','10px');
				small.hide();
			} else {
				$this.hide();
				textarea.css('font-size','13px');
				small.show();
			}
	});

	$( '.submit' ).bind( 'click', function() {
		var data_ = $('.data_').val();
		if( !data_ ){
			showMessage('数据空的','error',2000); return false;
		}
		var json = JSON.parse( data_ ),
			json_a = json,
			json_b = json,
			json_c = json,
			json_d = json,
			json_arr = json,
			wgs84togcj02 = {},
			bd09togcj02 = {},
			gcj02tobd09 = {},
			gcj02towgs84 = {};
			
			console.log( '之前的' , json_arr );
			
	        // wgs84转国测局坐标
		    for (var i = 0; i < json_arr.length; i++) {
		    	wgs84togcj02 = {}
				wgs84togcj02 = coordtransform.wgs84togcj02(json_arr[i][0], json_arr[i][1]);
				json_a[i] = wgs84togcj02;
	        } 
			$( '.aaa' ).val( jsl.format.formatJson(JSON.stringify(json_a)) );
			$( '.copyCode_aaa' ).attr( 'data-clipboard-text' , jsl.format.formatJson(JSON.stringify(json_a)) );



			// 国测局坐标转wgs84坐标
			for (var i = 0; i < json_arr.length; i++) {
				gcj02towgs84 = {}
				gcj02towgs84 = coordtransform.gcj02towgs84(json_arr[i][0], json_arr[i][1]);
				json_b[i] = gcj02towgs84;
	        } 
			$( '.bbb' ).val( jsl.format.formatJson(JSON.stringify(json_b)) );
			$( '.copyCode_bbb' ).attr( 'data-clipboard-text' , jsl.format.formatJson(JSON.stringify(json_b)) );



			// 百度经纬度坐标转国测局坐标
			for (var i = 0; i < json_arr.length; i++) {
				bd09togcj02 = {}
				bd09togcj02 = coordtransform.bd09togcj02(json_arr[i][0], json_arr[i][1]);
				json_c[i] = bd09togcj02;
	        } 
			$( '.ccc' ).val( jsl.format.formatJson(JSON.stringify(json_c)) );
			$( '.copyCode_ccc' ).attr( 'data-clipboard-text' , jsl.format.formatJson(JSON.stringify(json_c)) );



			// 国测局坐标转百度经纬度坐标
			for (var i = 0; i < json_arr.length; i++) {
				gcj02tobd09 = {}
				gcj02tobd09 = coordtransform.gcj02tobd09(json_arr[i][0], json_arr[i][1]);
				json_d[i] = gcj02tobd09;
	        } 
			$( '.ddd' ).val( jsl.format.formatJson(JSON.stringify(json_d)) );
			$( '.copyCode_ddd' ).attr( 'data-clipboard-text' , jsl.format.formatJson(JSON.stringify(json_d)) );
	});

    var clipboard = new ClipboardJS('.copyCode');
	    clipboard.on('success', function(e){
			showMessage('复制成功','success',2000);
	    });
	    clipboard.on('error', function(e){
			showMessage('复制失败，请长按复制','error',2000);
	    });

    function showMessage(message,type,time) {
        let str = ''
        switch (type) {
            case 'success':
                str = '<div class="success-message" style="width: 35%;height: 40px;text-align: center;background-color:#00E809;color: #FFF;position: fixed;left: 35%;top: 22%;line-height: 40px;border-radius: 5px;z-index: 9999;">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
                break;
            case 'error':
                str = '<div class="error-message" style="width: 35%;height: 40px;text-align: center;background-color: #FF6565;color: #FFF;position: fixed;left: 35%;top: 22%;line-height: 40px;border-radius: 5px;;z-index: 9999;">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
        }
        $('body').append(str);
        setTimeout(function () {
            $('.'+type+'-message').remove();
        },time);
    }

</script>
</body>
</html>